<template>
    <div>
        <el-dialog title="设备注册" :visible.sync="equipDialog" custom-class="dialogClass" @close="handleClose" :close-on-press-escape="false">
            <el-form :model="equipForm" label-width="80px" ref="equipForm" :rules="equipFormRules">
                <el-form-item label="选择客户" prop="userId">
                    <el-select v-model="equipForm.userId" placeholder="请选择客户" clearable>
                        <template v-for="(item, index) in gridData">
                            <el-option :label="item.name" :value="item.id"  :key="index"></el-option>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="设备ID" prop="deviceUserId">
                    <el-input v-model="equipForm.deviceUserId" placeholder="请输入设备ID"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="handleCancel">取 消</el-button>
                <el-button type="primary" @click="saveEquipRefister('equipForm')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import qs from "qs";
    export default {
        name: 'equipmentRegister',
        data(){
            return {
                gridData: [],
                equipDialog: this.showDiaolog,
                form: {
                    name: '',
                    address: ''
                },
                equipForm: {
                    userId: '',
                    deviceUserId: ''
                },
                equipFormRules: {
                    userId: [
                        { required: true, message: '请选择客户', trigger: 'blur' },
                    ],
                    deviceUserId: [
                        { required: true, message: '请输入设备ID', trigger: 'blur' },
                        { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
                    ]
                }
            }
        },
        props: {
            showDiaolog: Boolean,
            default: () => {
                return false
            }
        },
        created() {
            this.getUserList()
        },
        methods: {
            getUserList() {
                this.dialogTableVisible = true
                this.request.get('/uozo-alarm/user/getUserList', {
                  name: this.form.name,
                  address: this.form.address,
                  pageNumNum: this.pageNum,
                  pageSizeSize: this.pageSize
                }).then(res => {
                  this.gridData = res.list
                }).catch(err => {
                  console.error(err)
                  this.gridData = []
                })
            },
            saveEquipRefister(equipForm) {
                const _this = this
                _this.$refs[equipForm].validate((valid) => {
                    if (valid) {
                        this.request.post('/uozo-alarm/device/bindUserDevice', {
                          userId: this.equipForm.userId,
                          deviceUserId: this.equipForm.deviceUserId
                        }).then(() => {
                          this.$message({
                            message: '注册成功',
                            type: 'success'
                          })
                          this.equipDialog = false
                          this.handleClose()
                        }).catch(err => {
                          this.$message({
                            message: err.msg,
                            type: 'error'
                          });
                        })
                    }
                })
            },
            handleCancel() {
              this.$emit('setDialogShow', {
                name: '',
                show: false
              })
          },
          handleClose() {
            this.$emit('setDialogShow', {
              name: '',
              show: false
            })
          }
        }
    }
</script>
<style lang="scss" scoped>
.pagination{
    display: flex;
    justify-content: center;
    margin-top: 10px;
}
.dialogClass {
    background: rgba(4, 65, 136, 0.6) !important;
}
</style>
